<!--
 * @Author: wuzhen
 * @Date: 2020-01-15 11:29:14
 * @LastEditors: wuzhen
 * @LastEditTime: 2020-04-17 15:33:05
 * @Description: 头部注释
 -->
<template>
  <div class="user-info" :style="{ left: `${left}px`, top: `${top}px` }" v-click-outside="() => $emit('on-close')">
    <template v-if="showPage">
      <div class="user-base flex">
        <div class="flex-item">
          <div class="user-infobox">
            <h3 class="name">{{userData.usernickname || userData.username}}</h3>
            <div class="sex" v-if="userData.gender>0" :style="{background:filterSexBgColor}">
              <img :src="filterSex" alt="">
            </div>
            <div class="age" v-if="userData.birthday" :style="{background:filterSexBgColor}">{{userData.birthday|getAge}}{{$t("year")}}</div>
          </div>
          <p class="user-id">{{$t("user_id")}}：{{userData.userid}}</p>
        </div>
        <div class="user-img">
          <wz-img type="face" :src="userData.face" />
        </div>
      </div>
      <p class="user-sign">{{$t("signature")}}：{{userData.personlsign || $t("signatureTips")}}</p>
    </template>
    <div class="ivu-spin" style="display:flex;width: 100%;height:140px;align-items: center;justify-content: center;transition: none;" v-else>
      <div class="load-3">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserInfo } from "@/request/api";
export default {
  props: {
    left: {
      type: Number,
      default: 0
    },
    top: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      userData: {},
      showPage: false
    };
  },
  computed: {
    filterSex() {
      var gender = this.userData.gender;
      var img = "";
      switch (gender) {
        case 2:
          img = require("@/assets/image/man.png");
          break;
        case 4:
          img = require("@/assets/image/women.png");
          break;
        default:
          break;
      }
      return img;
    },
    filterSexBgColor() {
      var gender = this.userData.gender;
      var color = "rgba(0,0,0,0)";
      switch (gender) {
        case 4:
          color = "#FA5950";
          break;
        case 2:
          color = "#F8A42B";
          break;
        case 0:
          color = "#9E9E9E";
          break;
        default:
          break;
      }
      return color;
    }
  },
  filters: {
    getAge(birthday) {
      //出生时间 毫秒
      var birthDayTime = new Date(birthday).getTime();
      //当前时间 毫秒
      var nowTime = new Date().getTime();
      //一年毫秒数(365 * 86400000 = 31536000000)
      return Math.ceil((nowTime - birthDayTime) / 31536000000);
    }
  },
  methods: {
    // 获取数据
    async getData(id) {
      this.showPage = false;
      try {
        this.userData = await getUserInfo({ id: id });
        this.showPage = true;
      } catch (error) {
        throw error;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.user-info {
  position: fixed;
  z-index: 1000;
  width: 300px;
  min-height: 164px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
  color: #333;
  padding: 20px;
  p {
    line-height: 28px;
  }
  .user {
    &-base {
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    &-img {
      width: 40px;
      height: 40px;
      overflow: hidden;
      border-radius: 4px;
    }
    // &-name {
    //   font-size: 14px;
    // }
    &-infobox {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      .name {
        font-size: 14px;
        max-width: 155px;
      }
      .sex {
        width: 14px;
        height: 14px;
        margin-left: 5px;
        border-radius: 2px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .age {
        height: 14px;
        line-height: 14px;
        padding: 0 3px;
        font-size: 12px;
        margin-left: 5px;
        color: #fff;
        border-radius: 2px;
      }
    }
  }
}
</style>
